<template>
  <div class="goods-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有了没有了,别划了"
      @load="onLoad"
      :offset="300"
    >
      <div class="goods-item" v-for="item in goodsArr" :key="item.proid" @click="goGoodsDetail(item.proid)">
        <img :src="item.img1" />
        <h4>{{ item.proname }}</h4>
        <p>
          <span class="originprice">¥{{ item.originprice }} 元</span>
          <span class="discount"
            >¥{{ (item.originprice * (item.discount / 100)).toFixed(0) }}
            元
          </span>
        </p>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { recommendedListAPI } from "@/api/goods";
import { reactive, ref } from "vue";
import { IGoods } from "../../../utils/type";
import {useRouter} from "vue-router"
let $router = useRouter()
// 控制加载状态的
let loading = ref<boolean>(false)
// 用来控制数据有没有全部加载完成
let finished = ref<boolean>(false)
// 定义需要循环的变量
let goodsArr: Array<IGoods> = reactive<Array<IGoods>>([])
// 把接口里的参数定义为变量
let count = ref<number>(1)
let limitNum = ref<number>(10)
const onLoad = () => {
    // 代码加载就会执行load事件
    loading.value = true
    recommendedListAPI({
        // 两个参数
        // 页码 默认值为1
        count: count.value,
        //每页显示个数,默认值为12
        limitNum: limitNum.value
    }).then((res) => {
        // 把数据push进goodsArr
        goodsArr.push(...res.data.data)
        // push进去以后就不加载
        loading.value = false
        // 让页码加1
        count.value++
        // 需要判断本次请求是不是最后一次
        if (res.data.data.length < limitNum.value) {
            finished.value = true;
        }
    })
}
// 点击商品列表的某个商品 需要跳转到商品详情页
const goGoodsDetail = (proid:string)=>{
  // console.log(111);
  
// 这里需要进行路由传参，因为在进到商品详情页的时候 需要知道用户具体点击的是那个商品
// 在跳转的时候，需要携带商品的id进入到商品详情页
$router.push({
    // name:是通过路由的名称跳转

    path:"/goodsDetail",
    // 在跳转的时候，可以通过query或者prams设置传递参数
    query:{
      proid,
    },
       
})
}
</script>

<style scoped lang="less">
.goods-list {
  width: 100%;
  height: 100%;
  .van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .goods-item {
    margin: 10px 0;
    width: 45%;
    background-color: #fff;
    border-radius: 10px;
    img {
      width: 100%;
    }
    h4 {
      margin: 10px 0;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    p {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    .originprice {
      color: #888;
      text-decoration: line-through;
      font-size: 12px;
    }
    .discount {
      color: #e00;
    }
  }
}
</style>
